<template>
	<div class="so-tag" :class="type">
		{{name}}
	</div>
</template>

<script>
export default {
	name: 'SoTag',
	props: {
		name: {
			type: String
		},
		type: {
			type: String
		}
	}
};
</script>

<style lang="scss" scoped>
	.so-tag {
		float: left;
		padding: 0 10px;
		margin: 5px;
		font-size: 12px;
		color: white;
		background: #7aa7d1;
		height: 26px;
		line-height: 26px;
		border-radius: 4px;
		cursor: pointer;

		&:hover {
			background: #7aa7d1;
		}

		&.text {
			padding: unset;
			background: unset;
			border-radius: unset;
			color: #7aa7d1;

			&:hover {
				color: #0084ff;
			}
		}

	}
</style>
